<template>
  <div>
    <!-- <div>
      <ul class="imglist">
        <li v-for="item in fileList" :key="item.id" class="imgitem">
          <span class="ltext">{{ item.fileName }}</span>
          <span class="rbut">
            <el-button type="text" @click="preview(item)">预览</el-button>
            <el-button type="text" @click="preview(item, 1)"
              >iframe预览</el-button
            >
          </span>
        </li>
      </ul>
    </div> -->
    <el-dialog
      title="文件预览"
      :visible.sync="dialogVisible"
      width="50%"
      :fullscreen="isFull"
      :custom-class="isFull ? 'preview-dialog' : ''"
      :before-close="handleClose"
    >
      <iframe
        v-if="isFull"
        :src="url"
        frameborder="0"
        style="width: 100%; height: 90vh"
      ></iframe>
    </el-dialog>
    <!-- 全屏PDF.通过改变div宽度 -->
    <el-dialog
      :visible.sync="dialogVisible2"
      width="50%"
      custom-class="magnifer-dialog"
    >
      <div ref="printContent" class="magnifer">
        <Pdf v-for="i in numPages" :key="i" :src="src" :page="i" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pdf from "vue-pdf";

export default {
  components: {
    Pdf,
  },
  props: {
    // fileList: {
    //   type: Array,
    //   default: true,
    // },
    // url: {
    //   type: String,
    //   default: true,
    // },
  },
  data() {
    return {
      numPages: undefined,
      dialogVisible: false,
      src: "",
      isFull: false,
      dialogVisible2: false,
    };
  },
  created() {},
  methods: {
    previewFn(url) {
      this.url = url;
      let type = url.substring(url.lastIndexOf(".") + 1);
      if (type == "pdf" || type == "txt") {
        this.isFull = true;
        this.dialogVisible = true;
      } else {
        window.open(this.url);
      }
    },
    // 预览
    preview(item, type) {
      this.src = Pdf.createLoadingTask(item.fileUrl);
      this.src.promise.then((pdf) => {
        this.numPages = pdf.numPages;
      });
      if (type === 1) {
        this.isFull = true;
        this.dialogVisible = true;
      } else if (type === 2) {
        this.dialogVisible2 = true;
      } else {
        this.isFull = false;
        this.dialogVisible = true;
      }
    },
    // 关闭弹框
    handleClose() {
      this.src = "";
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.imglist {
  width: 500px;
  padding-top: 20px;
  .imgitem {
    height: 35px;
    overflow: hidden;
  }
  .ltext {
    line-height: 35px;
  }
  .rbut {
    float: right;
  }
}
.preview-dialog {
  .el-dialog__body {
    height: 100%;
  }
}
.magnifer-dialog {
  .el-dialog__header {
    height: 30px;
  }
  .el-dialog__body {
    overflow: hidden;
  }
  .magnifer {
    width: 125%;
    margin-left: -90px;
    margin-top: -80px;
  }
}
</style>